<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>认证排程</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/viptail_cms.css" rel="stylesheet">
    <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <form class="form-inline">
            <div class="form-group">
                <label for="scheduleDate">月份:&nbsp;&nbsp;</label>
                <div class="input-group">
                    <div class="input-group-addon btn">
                        <input id="datetimepicker" type="button" style="width:15px;height:18px;border:none;outline:none;background:url('img/icon_main_deal.png') center center no-repeat;background-size:cover;">
                    </div>
                    <input type="text" class="form-control" id="scheduleDate" data-date-format="yyyy-mm" placeholder="如:1991-10">
                </div>
            </div>
            <button id="searchBtn" type="button" class="btn btn-primary">查询</button>
        </form>
        <table class="table table-bordered text-center">
            <thead>
                <tr class="active"><th class="text-muted">周日</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th><th class="text-muted">周六</th></tr>
            </thead>
            <tbody id="curmonthdays"></tbody>
        </table>

        <div class="row">
            <div class="col-md-6">
                <table class="table table-bordered table-striped text-center">
                    <thead>
                        <tr class="active"><th colspan="5">排程信息&nbsp;&nbsp;<mark>2016-08-04</mark></th></tr>
                    </thead>
                    <tbody>
                        <tr class="text-muted"><th>预约区间</th><th>已预约</th><th>未预约</th><th>总数</th><th></th></tr>
                        <tr><td>09:00~09:30</td><td><a href="">0</a></td><td>5</td><td>5</td><td><button type="button" class="btn btn-primary btn-xs">修改</button></td></tr>
                        <tr><td>09:30~10:00</td><td><a href="">0</a></td><td>5</td><td>5</td><td><button type="button" class="btn btn-primary btn-xs">修改</button></td></tr>
                        <tr><td>10:00~10:30</td><td><a href="">0</a></td><td>5</td><td>5</td><td><button type="button" class="btn btn-primary btn-xs">修改</button></td></tr>
                        <tr><td>10:30~11:00</td><td><a href="">0</a></td><td>5</td><td>5</td><td><button type="button" class="btn btn-primary btn-xs">修改</button></td></tr>
                    </tbody>
                </table>
            </div>
            <div class="col-md-6">
                <table class="table table-bordered table-striped text-center">
                    <thead>
                        <tr class="active"><th colspan="2">寄养家庭信息&nbsp;&nbsp;<mark>09:00~09:30</mark></th></tr>
                    </thead>
                    <tbody>
                        <tr class="text-muted"><th>寄养家庭名称</th><th>客服标识</th></tr>
                        <tr><td></td><td></td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script src="js/jquery-2.2.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-datetimepicker.min.js"></script>
    <script src="js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script>
        /**
         * 改变月份
         */
        var changeMonth = function (date) {
            var week = date.getDay(),
                    y = date.getFullYear(),
                    m = date.getMonth(),
                    days = new Date(y,m+1,0).getDate();
            var table = $('#curmonthdays').empty();
            var tr = $('<tr>'),trc = 2;
            for(var i = 1; i <= days+week; i++){
                var day = i-week; day = (day<10?'0':'')+day;
                var month = (m<10?'0':'')+(m+1);
                if(i <= week){
                    $('<td>').addClass('dis').appendTo(tr);
                }else{
                    $('<td>').text(y+'-'+month+'-'+day).appendTo(tr);
                }
                if(i%7 == 0){
                    tr.appendTo(table);
                    tr = $('<tr>');
                    switch (trc++/2%2){
                        case 0: tr.addClass('info');break;
                        case 1: tr.addClass('success');break;
                    }
                }
                if(parseInt(day) == days){
                    for(var j = 1; j <= (7-(days+week)%7)%7; j++){
                        $('<td>').addClass('dis').appendTo(tr);
                    }
                    tr.appendTo(table);
                }
            }
            table.find('td:not(.dis)').on('click',function(){
                if(cursel!=null){
                    cursel.removeClass('selected');
                }
                cursel = $(this).addClass('selected');
            })
        }
        //初始状态显示当月日期
        var date = new Date(),
                month = date.getMonth()+1;
        month = month < 10 ? '0'+month: ''+month;
        $('#scheduleDate').val(date.getFullYear()+'-'+month);
        changeMonth(new Date(date.getFullYear(),date.getMonth(),1));
        var cursel = null;
        //日历控件
        $('#datetimepicker').datetimepicker({
            output: $('#scheduleDate'),//修改 输出的日期元素
            startView: "year",//选择年视图 3
            minView: "year", //选择日期后，不会再跳转去选择日时分秒
            format: "yyyy-mm",
            language: 'zh-CN',
            autoclose:true
        }).on('changeMonth', function(ev){
            changeMonth(ev.date);
        });
        //查询按钮
        $('#searchBtn').on('click',function () {
            var now = $('#scheduleDate').val().split('-');
            changeMonth(new Date(now[0],parseInt(now[1])-1,1));
        })
    </script>
</body>

</html>
